<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- import Vue.js -->
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <!-- import jquery -->
    <script src="../../lib/jquery-3.4.1.min.js"></script>
    <!-- import highlight -->
    <script src="../../lib/highlight.pack.js"></script>
    <!-- import dark.css -->
    <link rel="stylesheet" href="../../lib/styles/dark.css">
    <!-- 引入 VContextmenu 组件 -->
    <script src="../../lib/contextmenu.js"></script>
    <!-- 引入 VContextmenu 组件样式 -->
    <link rel="stylesheet" href="../../lib/contextmenu.css">
    <style>
        .paging {
            margin: auto;
            margin-top: 10px;
        }
        
        #app {
            margin-top: 25px;
            text-align: center;
        }
        
        #app2 {
            margin-top: 20px;
            text-align: center;
        }
        
        #page {
            margin-bottom: 25px;
            text-align: center;
        }
        
        .codeBox {
            width: 80%;
            height: 30%;
            margin: auto;
            flex: 2.5;
        }
    </style>
</head>

<body style="background-color: rgb(30, 30, 30); height: 100%;">
    <!-- 顶部搜索框 -->
    <div id='app2'>
        <i-input search enter-button placeholder="Enter something..." style="width: 40%; margin: auto" @on-search="search" @on-enter="search" v-if="display" />
    </div>
    <div id="app">
        <v-contextmenu ref="contextmenu">
            <v-contextmenu-item @click='newFile'>新建</v-contextmenu-item>
            <v-contextmenu-item @click='copy'>复制</v-contextmenu-item>
            <v-contextmenu-item @click='analysis'>分析</v-contextmenu-item>
        </v-contextmenu>
        <!--分页/代码框-->
        <div v-contextmenu:contextmenu>
            <div v-for="item in build(codeData)" :key="item.id" class='codeBox'>
                <h3 style="text-align: left">[{{ item.language }}]</h3>
                <div v-highlight>
                    <pre>
                    <code class=item.language v-text="item.content" style="height: 28vh"></code>
                </pre>
                </div>
                <!-- {{ item.content }} -->
            </div>
        </div>
    </div>
    <div id='page'>
        <Page :total="vm.dataCount" show-total :page-size="vm.pageSize" class="paging" @on-change="vm.changepage"></Page>
    </div>

    <!-- 右侧工具栏 -->
    <div id='app3' style="bottom: 40%; right: 5px; position: fixed">
        <i-menu theme="dark" active-name="1" style="width: 66px; height: 150px;" @on-select="show">
            <Menu-Item name="1">
                <Icon type="ios-arrow-up" />
            </Menu-Item>
            <Menu-Item name="2">
                <Icon type="ios-arrow-down" />
            </Menu-Item>
            <Menu-Item name="3">
                <Icon type="ios-search" />
            </Menu-Item>
        </i-menu>
    </div>
    <script>
        Vue.directive('highlight', function(el) {
            let blocks = el.querySelectorAll('pre code');
            blocks.forEach((block) => {
                hljs.highlightBlock(block);
            })
        })
        let testDate = {
            codeRecommedation: [{
                id: 1,
                language: "c++",
                content: '#include<iostream>\\nint main(){\\ncout<<"hello world";\\nreturn 0;}'
            }, {
                id: 2,
                language: "python",
                content: "print('hello world')"
            }, {
                id: 3,
                language: "css",
                content: "width:'100px'"
            }, {
                id: 4,
                language: "html",
                content: " &lt;div&gt;&lt;/div&gt;"
            }, {
                id: 5,
                language: "c++",
                content: '#include<iostream>\\nint main(){\\ncout<<"hello world";\\nreturn 0;}'
            }, {
                id: 6,
                language: "python",
                content: "print('hello world')"
            }, {
                id: 7,
                language: "javascript",
                content: "console.log('hello world')"
            }, {
                id: 8,
                language: "javascript",
                content: "console.log('hello world')"
            }]
        };
        var vm2 = new Vue({
            el: '#app2',
            data: {
                value: undefined,
                display: true
            },
            methods: {
                search() {
                    console.log('yes');
                }
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                dataCount: 0,
                pageSize: 3,
                codeData: [],
                socketData: [],
                cur_index: 0
            },
            methods: {
                handleData() {
                    this.cur_index = 1;
                    this.socketData = testDate.codeRecommedation;
                    this.dataCount = testDate.codeRecommedation.length;
                    if (testDate.codeRecommedation.length < this.pageSize)
                        this.codeData = this.socketData;
                    else
                        this.codeData = this.socketData.slice(0, this.pageSize);
                },
                changepage(index) {
                    this.cur_index = index;
                    var _start = (index - 1) * this.pageSize;
                    var _end = index * this.pageSize;
                    this.codeData = this.socketData.slice(_start, _end);
                },
                build(codeData) {
                    return codeData;
                },
                newFile() {
                    console.log('this is new');
                },
                copy() {
                    console.log('this is copy');
                },
                analysis() {
                    console.log('this is analysis');
                }
            },
            created() {
                this.handleData();
            }
        });
        var vm3 = new Vue({
            el: '#app3',
            data: {},
            methods: {
                show(name) {
                    if (name == '3')
                        vm2.display = !vm2.display;
                    else if (name == '2') {
                        if (vm.cur_index + 1 <= ((vm.dataCount - 1) / 3) + 1) {
                            vm.cur_index = vm.cur_index + 1;
                            vm.changepage(vm.cur_index);
                        }
                    } else if (name == '1') {
                        if (vm.cur_index - 1 >= 1) {
                            vm.cur_index = vm.cur_index - 1;
                            vm.changepage(vm.cur_index);
                        }
                    }
                }
            }
        });
        var vm4 = new Vue({
            el: '#page',
            data: {

            },
            methods: {}
        });
    </script>


</body>

</html>